<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <title>我的心愿墙</title>
    <!--<link rel="stylesheet"
          href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
    <script src="dist/js/jquery-2.1.4.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
    <style>
        body {
            padding-top: 80px;

        }

        .dm {
            width: 100%;
            height: 100%;
            border: 1px solid #000

        }

        .dm .d_screen .d_mask {
            width: 100%;
            height: 380px;
            background: #000;
            opacity: 0.5;
            filter: alpha(opacity=50);
            z-index: 1;

        }

        .dm .d_screen .d_show div {
            font-size: 22px;
            line-height: 36px;
            font-weight: 500;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;

        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <img alt="140x140" src="images/favicon.ico" class="img-circle" width=22px
                             style="float: left;margin-top: 13px"/>
                        <p class="navbar-brand">仰恩社区</p>
                    </div>
                    <div class="collapse navbar-collapse navbar-responsive-collapse"
                         id="example-navbar-collapse">
                        <div class="col-xs-6" style="margin-top: 10px;margin-left: 50px">
                            <ul class="nav nav-pills nav-justified " style="margin-right: 50px">
                                <li><a href="Index"><strong>校园动态</strong></a></li>
                                <li><a href="news.html"><strong>校园新闻</strong></a></li>
                                <li><a href="campusbrows.html"><strong>校园浏览</strong></a></li>
                                <li><a href="campusview.html"><strong>校园风采</strong></a></li>
                                <li class="active"><a
                                        href="personal.html"><strong>我的心愿墙</strong></a></li>
                                <li><a href="aboutours.html"><strong>关于网站</strong></a></li>
                            </ul>
                        </div>
                        <!--<div style="margin-top: 3px;float: right">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="regist.html"><span
                                        class="glyphicon glyphicon-user"></span>
                                    注册</a></li>
                                <li><a href="login.html"><span
                                        class="glyphicon glyphicon-log-in"></span> 登录</a>
                                </li>
                            </ul>
                        </div>-->
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <div class="row clearfix">
        <div class="col-md-12 column ">
            <div class="col-xs-12 column">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <button type="button" class="btn btn-danger btn-lg disabled">
                            <span class="glyphicon glyphicon-heart"></span>
                            <strong>心愿墙</strong>
                            <span class="glyphicon glyphicon-heart"></span>
                        </button>
                    </div>
                    <div class="panel-body" style="background-image: url(images/login_bg_0.jpg);background-size: cover">
                        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0"
                                width="100%" height="450px" src="danmu.html"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.wilddog.com/sdk/js/2.0.0/wilddog-auth.js"></script>
<script src="https://cdn.wilddog.com/sdk/js/2.0.0/wilddog-sync.js"></script>
<script src="https://cdn.wilddog.com/js/vendor/jquery-1.11.2.min.js"></script>


<script>

    $(document).ready(function () {

        var config = {
            authDomain: "danmu.wilddog.com",
            syncURL: "https://danmu.wilddogio.com"
        };
        wilddog.initializeApp(config);
        var ref = wilddog.sync().ref();
        var arr = [];

        $(".s_sub").click(function () {
            var text = $(".s_txt").val();
            ref.child('message').push(text);
            $(".s_txt").val('');
        });

        $(".s_txt").keypress(function (event) {
            if (event.keyCode == "13") {
                $(".s_sub").trigger('click');
            }
        });

        $(".s_del").click(function () {
            ref.remove();
            arr = [];
            $('.d_show').empty();
        });

        ref.child('message').on('child_added', function (snapshot) {
            var text = snapshot.val();
            arr.push(text);
            var textObj = $("<div class=\"dm_message\"></div>");
            textObj.text(text);
            $(".d_show").append(textObj);
            moveObj(textObj);
        });

        ref.on('child_removed', function () {
            arr = [];
            $('.d_show').empty();
        });

        var topMin = $('.d_mask').offset().top;
        var topMax = topMin + $('.d_mask').height();
        var _top = topMin;

        var moveObj = function (obj) {
            var _left = $('.d_mask').width() - obj.width();
            _top = _top + 50;
            if (_top > (topMax - 50)) {
                _top = topMin;
            }
            obj.css({left: _left, top: _top, color: getReandomColor()});
            var time = 20000 + 10000 * Math.random();
            obj.animate({left: "-" + _left + "px"}, time, function () {
                obj.remove();
            });
        };

        var getReandomColor = function () {
            return '#' + (function (h) {
                        return new Array(7 - h.length).join("0") + h
                    })((Math.random() * 0x1000000 << 0).toString(16))
        };

        var getAndRun = function () {
            if (arr.length > 0) {
                var n = Math.floor(Math.random() * arr.length + 1) - 1;
                var textObj = $("<div>" + arr[n] + "</div>");
                $(".d_show").append(textObj);
                moveObj(textObj);
            }

            setTimeout(getAndRun, 3000);
        };

        jQuery.fx.interval = 50;
        getAndRun();
    });

</script>
<div class="bottom" style="margin-top: 10px;color: #2aabd2">
    <hr>
    <h5 class="text-center">COPYRIGHT 2016 YANGENSHUO all right RESERVED 版权所有·仰恩说 </h5>
</div>
</body>
</html>